React Server Actions: Formalarni Qayta Ishlash va Server Integratsiyasi Bo'yicha To'liq Qo'llanma

            // app/actions.js
'use server'

import { cookies } from 'next/headers'
import { revalidatePath } from 'next/cache'

export async function createPost(formData) {
  const title = formData.get('title')
  const content = formData.get('content')

  // Ma'lumotlar bazasiga kiritishni simulyatsiya qilish
  await new Promise((resolve) => setTimeout(resolve, 1000))

  console.log('Post yaratildi:', { title, content })

  // /blog yo'nalishini qayta tasdiqlash
  revalidatePath('/blog')

  return { message: 'Post muvaffaqiyatli yaratildi!' }
}

            

              
                Copy
              
            
          

            // app/components/PostForm.js
import { createPost } from '../actions'
'use client'

import { useFormStatus } from 'react-dom'

function SubmitButton() {
  const { pending } = useFormStatus()

  return (
    
      {pending ? 'Yaratilmoqda...' : 'Post Yaratish'}
    
  )
}

export default function PostForm() {
  return (
    

      Sarlavha:
      

      Mazmuni:
      
      <SubmitButton />
    </form>
  )
}
</code>
            <div class="copy-button-container">
              <button 
                data-code="Ly8gYXBwL2NvbXBvbmVudHMvUG9zdEZvcm0uanMKaW1wb3J0IHsgY3JlYXRlUG9zdCB9IGZyb20gJy4uL2FjdGlvbnMnCid1c2UgY2xpZW50JwoKaW1wb3J0IHsgdXNlRm9ybVN0YXR1cyB9IGZyb20gJ3JlYWN0LWRvbScKCmZ1bmN0aW9uIFN1Ym1pdEJ1dHRvbigpIHsKICBjb25zdCB7IHBlbmRpbmcgfSA9IHVzZUZvcm1TdGF0dXMoKQoKICByZXR1cm4gKAogICAgPGJ1dHRvbiB0eXBlPSJzdWJtaXQiIGRpc2FibGVkPXtwZW5kaW5nfT4KICAgICAge3BlbmRpbmcgPyAnWWFyYXRpbG1vcWRhLi4uJyA6ICdQb3N0IFlhcmF0aXNoJ30KICAgIDwvYnV0dG9uPgogICkKfQoKZXhwb3J0IGRlZmF1bHQgZnVuY3Rpb24gUG9zdEZvcm0oKSB7CiAgcmV0dXJuICgKICAgIDxmb3JtIGFjdGlvbj17Y3JlYXRlUG9zdH0+CiAgICAgIDxsYWJlbCBodG1sRm9yPSJ0aXRsZSI+U2FybGF2aGE6PC9sYWJlbD4KICAgICAgPGlucHV0IHR5cGU9InRleHQiIGlkPSJ0aXRsZSIgbmFtZT0idGl0bGUiIHJlcXVpcmVkIC8+CgogICAgICA8bGFiZWwgaHRtbEZvcj0iY29udGVudCI+TWF6bXVuaTo8L2xhYmVsPgogICAgICA8dGV4dGFyZWEgaWQ9ImNvbnRlbnQiIG5hbWU9ImNvbnRlbnQiIHJlcXVpcmVkIC8+CgogICAgICA8U3VibWl0QnV0dG9uIC8+CiAgICA8L2Zvcm0+CiAgKQp9Cg=="
                class="copy-button"
                title="Copy code"
              >
                Copy
              </button>
            </div>
          </pre>
        </div>
      

<p>Ushbu misolda:</p>

<ul>
  <li><code>createPost</code> amali <code>../actions</code> faylidan import qilinadi.</li>
  <li><code><form></code> elementining <code>action</code> prop'si <code>createPost</code> funksiyasiga o'rnatilgan.</li>
  <li><code>SubmitButton</code> komponenti formaning hozirda yuborilayotganligini aniqlash uchun <code>useFormStatus</code> hook'idan foydalanadi. U bir nechta yuborishlarning oldini olish uchun forma yuborilayotganda tugmani o'chirib qo'yadi.</li>
</ul>

<h3>Forma Ma'lumotlarini Boshqarish</h3>

<p>Server Actions avtomatik ravishda forma ma'lumotlarini <code>FormData</code> obyekti sifatida oladi. Siz ma'lumotlarga <code>FormData</code> obyektining <code>get</code> usuli yordamida kirishingiz mumkin. Mana bir misol:</p>


        <div class="code-block-wrapper">
          <pre data-language="code">
            <code>// app/actions.js
'use server'

export async function createPost(formData) {
  const title = formData.get('title')
  const content = formData.get('content')

  // ...
}
</code>
            <div class="copy-button-container">
              <button 
                data-code="Ly8gYXBwL2FjdGlvbnMuanMKJ3VzZSBzZXJ2ZXInCgpleHBvcnQgYXN5bmMgZnVuY3Rpb24gY3JlYXRlUG9zdChmb3JtRGF0YSkgewogIGNvbnN0IHRpdGxlID0gZm9ybURhdGEuZ2V0KCd0aXRsZScpCiAgY29uc3QgY29udGVudCA9IGZvcm1EYXRhLmdldCgnY29udGVudCcpCgogIC8vIC4uLgp9Cg=="
                class="copy-button"
                title="Copy code"
              >
                Copy
              </button>
            </div>
          </pre>
        </div>
      

<p>Ushbu misolda, <code>title</code> va <code>content</code> <code>formData</code> obyektidan <code>get</code> usuli yordamida olinadi.</p>

<h3>Foydalanuvchiga Fikr-mulohaza Berish</h3>

<p>Server Action'dan qiymat qaytarish orqali foydalanuvchiga fikr-mulohaza berishingiz mumkin. Bu qiymat amalni chaqirgan komponent uchun mavjud bo'ladi. Siz bu qiymatdan foydalanuvchiga muvaffaqiyatli yoki xato xabarlarini ko'rsatish uchun foydalanishingiz mumkin. Mana bir misol:</p>


        <div class="code-block-wrapper">
          <pre data-language="code">
            <code>// app/actions.js
'use server'

export async function createPost(formData) {
  // ...

  return { message: 'Post muvaffaqiyatli yaratildi!' }
}
</code>
            <div class="copy-button-container">
              <button 
                data-code="Ly8gYXBwL2FjdGlvbnMuanMKJ3VzZSBzZXJ2ZXInCgpleHBvcnQgYXN5bmMgZnVuY3Rpb24gY3JlYXRlUG9zdChmb3JtRGF0YSkgewogIC8vIC4uLgoKICByZXR1cm4geyBtZXNzYWdlOiAnUG9zdCBtdXZhZmZhcWl5YXRsaSB5YXJhdGlsZGkhJyB9Cn0K"
                class="copy-button"
                title="Copy code"
              >
                Copy
              </button>
            </div>
          </pre>
        </div>
      


        <div class="code-block-wrapper">
          <pre data-language="code">
            <code>// app/components/PostForm.js
'use client'

import { useState } from 'react'
import { createPost } from '../actions'

export default function PostForm() {
  const [message, setMessage] = useState(null)

  async function handleSubmit(formData) {
    const result = await createPost(formData)
    setMessage(result.message)
  }

  return (
    <div>
      <form action={handleSubmit}>
        {/* ... */}
      </form>
      {message && <p>{message}</p>}
    </div>
  )
}
</code>
            <div class="copy-button-container">
              <button 
                data-code="Ly8gYXBwL2NvbXBvbmVudHMvUG9zdEZvcm0uanMKJ3VzZSBjbGllbnQnCgppbXBvcnQgeyB1c2VTdGF0ZSB9IGZyb20gJ3JlYWN0JwppbXBvcnQgeyBjcmVhdGVQb3N0IH0gZnJvbSAnLi4vYWN0aW9ucycKCmV4cG9ydCBkZWZhdWx0IGZ1bmN0aW9uIFBvc3RGb3JtKCkgewogIGNvbnN0IFttZXNzYWdlLCBzZXRNZXNzYWdlXSA9IHVzZVN0YXRlKG51bGwpCgogIGFzeW5jIGZ1bmN0aW9uIGhhbmRsZVN1Ym1pdChmb3JtRGF0YSkgewogICAgY29uc3QgcmVzdWx0ID0gYXdhaXQgY3JlYXRlUG9zdChmb3JtRGF0YSkKICAgIHNldE1lc3NhZ2UocmVzdWx0Lm1lc3NhZ2UpCiAgfQoKICByZXR1cm4gKAogICAgPGRpdj4KICAgICAgPGZvcm0gYWN0aW9uPXtoYW5kbGVTdWJtaXR9PgogICAgICAgIHsvKiAuLi4gKi99CiAgICAgIDwvZm9ybT4KICAgICAge21lc3NhZ2UgJiYgPHA+e21lc3NhZ2V9PC9wPn0KICAgIDwvZGl2PgogICkKfQo="
                class="copy-button"
                title="Copy code"
              >
                Copy
              </button>
            </div>
          </pre>
        </div>
      

<p>Ushbu misolda:</p>

<ul>
  <li><code>createPost</code> amali <code>message</code> xususiyatiga ega obyektni qaytaradi.</li>
  <li><code>PostForm</code> komponenti xabarni saqlash uchun <code>useState</code> hook'idan foydalanadi.</li>
  <li><code>handleSubmit</code> funksiyasi <code>createPost</code> amalini chaqiradi va xabar holatini amal tomonidan qaytarilgan qiymatga o'rnatadi.</li>
  <li>Xabar foydalanuvchiga <code><p></code> elementida ko'rsatiladi.</li>
</ul>

<h3>Xatolarni Boshqarish</h3>

<p>Server Actions xatoliklarni keltirib chiqarishi mumkin, ular React ish vaqti tomonidan ushlanadi. Siz bu xatolarni komponentlaringizda <code>try...catch</code> bloki yordamida boshqarishingiz mumkin. Mana bir misol:</p>


        <div class="code-block-wrapper">
          <pre data-language="code">
            <code>// app/actions.js
'use server'

export async function createPost(formData) {
  // ...

  if (!title || title.length < 5) {
    throw new Error('Sarlavha kamida 5 belgidan iborat bo\'lishi kerak.')
  }

  return { message: 'Post muvaffaqiyatli yaratildi!' }
}
</code>
            <div class="copy-button-container">
              <button 
                data-code="Ly8gYXBwL2FjdGlvbnMuanMKJ3VzZSBzZXJ2ZXInCgpleHBvcnQgYXN5bmMgZnVuY3Rpb24gY3JlYXRlUG9zdChmb3JtRGF0YSkgewogIC8vIC4uLgoKICBpZiAoIXRpdGxlIHx8IHRpdGxlLmxlbmd0aCA8IDUpIHsKICAgIHRocm93IG5ldyBFcnJvcignU2FybGF2aGEga2FtaWRhIDUgYmVsZ2lkYW4gaWJvcmF0IGJvXCdsaXNoaSBrZXJhay4nKQogIH0KCiAgcmV0dXJuIHsgbWVzc2FnZTogJ1Bvc3QgbXV2YWZmYXFpeWF0bGkgeWFyYXRpbGRpIScgfQp9Cg=="
                class="copy-button"
                title="Copy code"
              >
                Copy
              </button>
            </div>
          </pre>
        </div>
      


        <div class="code-block-wrapper">
          <pre data-language="code">
            <code>// app/components/PostForm.js
'use client'

import { useState } from 'react'
import { createPost } from '../actions'

export default function PostForm() {
  const [message, setMessage] = useState(null)
  const [error, setError] = useState(null)

  async function handleSubmit(formData) {
    try {
      const result = await createPost(formData)
      setMessage(result.message)
      setError(null)
    } catch (e) {
      setError(e.message)
      setMessage(null)
    }
  }

  return (
    <div>
      <form action={handleSubmit}>
        {/* ... */}
      </form>
      {message && <p>{message}</p>}
      {error && <p style={{ color: 'red' }}>{error}</p>}
    </div>
  )
}
</code>
            <div class="copy-button-container">
              <button 
                data-code="Ly8gYXBwL2NvbXBvbmVudHMvUG9zdEZvcm0uanMKJ3VzZSBjbGllbnQnCgppbXBvcnQgeyB1c2VTdGF0ZSB9IGZyb20gJ3JlYWN0JwppbXBvcnQgeyBjcmVhdGVQb3N0IH0gZnJvbSAnLi4vYWN0aW9ucycKCmV4cG9ydCBkZWZhdWx0IGZ1bmN0aW9uIFBvc3RGb3JtKCkgewogIGNvbnN0IFttZXNzYWdlLCBzZXRNZXNzYWdlXSA9IHVzZVN0YXRlKG51bGwpCiAgY29uc3QgW2Vycm9yLCBzZXRFcnJvcl0gPSB1c2VTdGF0ZShudWxsKQoKICBhc3luYyBmdW5jdGlvbiBoYW5kbGVTdWJtaXQoZm9ybURhdGEpIHsKICAgIHRyeSB7CiAgICAgIGNvbnN0IHJlc3VsdCA9IGF3YWl0IGNyZWF0ZVBvc3QoZm9ybURhdGEpCiAgICAgIHNldE1lc3NhZ2UocmVzdWx0Lm1lc3NhZ2UpCiAgICAgIHNldEVycm9yKG51bGwpCiAgICB9IGNhdGNoIChlKSB7CiAgICAgIHNldEVycm9yKGUubWVzc2FnZSkKICAgICAgc2V0TWVzc2FnZShudWxsKQogICAgfQogIH0KCiAgcmV0dXJuICgKICAgIDxkaXY+CiAgICAgIDxmb3JtIGFjdGlvbj17aGFuZGxlU3VibWl0fT4KICAgICAgICB7LyogLi4uICovfQogICAgICA8L2Zvcm0+CiAgICAgIHttZXNzYWdlICYmIDxwPnttZXNzYWdlfTwvcD59CiAgICAgIHtlcnJvciAmJiA8cCBzdHlsZT17eyBjb2xvcjogJ3JlZCcgfX0+e2Vycm9yfTwvcD59CiAgICA8L2Rpdj4KICApCn0K"
                class="copy-button"
                title="Copy code"
              >
                Copy
              </button>
            </div>
          </pre>
        </div>
      

<p>Ushbu misolda:</p>

<ul>
  <li><code>createPost</code> amali sarlavha 5 belgidan kam bo'lsa, xatolik chiqaradi.</li>
  <li><code>PostForm</code> komponenti <code>createPost</code> amali tomonidan chiqarilgan har qanday xatolikni ushlash uchun <code>try...catch</code> blokidan foydalanadi.</li>
  <li>Agar xatolik ushlansa, xato xabari foydalanuvchiga qizil matnli <code><p></code> elementida ko'rsatiladi.</li>
</ul>

<h2>React Server Actions'dan foydalanish bo'yicha eng yaxshi amaliyotlar</h2>

<p>Server Actions'dan samarali foydalanayotganingizga ishonch hosil qilish uchun quyidagi eng yaxshi amaliyotlarni ko'rib chiqing:</p>

<h3><code>'use server'</code> Direktivadan Foydalaning</h3>

<p>Har doim Server Action fayllaringizning yuqori qismiga <code>'use server'</code> direktivasini qo'shing. Bu direktiva React kompilyatoriga fayldagi funksiyalar serverda bajarilishi kerakligini bildiradi. Bu xavfsizlik va unumdorlik uchun juda muhimdir.</p>

<h3>Amallarni Kichik va Maqsadli Saqlang</h3>

<p>Har bir Server Action bitta, aniq belgilangan vazifani bajarishi kerak. Bu sizning amallaringizni tushunish, sinovdan o'tkazish va qo'llab-quvvatlashni osonlashtiradi. Bir nechta bog'liq bo'lmagan vazifalarni bajaradigan katta, monolitik amallarni yaratishdan saqlaning.</p>

<h3>Ma'lumotlarni Serverda Tekshiring</h3>

<p>Har qanday operatsiyani bajarishdan oldin har doim ma'lumotlarni serverda tekshiring. Bu ilovangizni noto'g'ri yoki zararli ma'lumotlardan himoya qiladi. Ma'lumotlar turini tekshirish, uzunlikni tekshirish va muntazam ifodalar kabi tegishli tekshirish usullaridan foydalaning. Server tomonidagi tekshirish chetlab o'tilishi mumkin bo'lgan mijoz tomonidagi tekshirishga qaraganda xavfsizroqdir.</p>

<h3>Xatolarni Nazokat bilan Boshqaring</h3>

<p>Server Actions'da har doim xatolarni nazokat bilan boshqaring. Bu ilovangizning ishdan chiqishini oldini oladi va yaxshiroq foydalanuvchi tajribasini ta'minlaydi. Yuzaga kelishi mumkin bo'lgan har qanday istisnolarni ushlash uchun <code>try...catch</code> bloklaridan foydalaning va foydalanuvchiga ma'lumot beruvchi xato xabarlarini taqdim eting.</p>

<h3>Optimistik Yangilanishlardan Foydalaning</h3>

<p>Ilovangizning sezgirligini oshirish uchun optimistik yangilanishlardan foydalaning. Server o'zgarishni tasdiqlashidan oldin ham amalning kutilgan natijasini aks ettirish uchun foydalanuvchi interfeysini darhol yangilang. Agar server tomonidagi operatsiya muvaffaqiyatsiz tugasa, siz foydalanuvchi interfeysini osongina avvalgi holatiga qaytarishingiz mumkin.</p>

<h3>Keshni Ko'rib Chiqing</h3>

<p>Unumdorlikni oshirish uchun Server Actions natijalarini keshda saqlashni ko'rib chiqing. Bu, ayniqsa, qimmat operatsiyalarni bajaradigan yoki tez-tez chaqiriladigan amallar uchun foydali bo'lishi mumkin. Serveringizdagi yukni kamaytirish uchun HTTP keshlash yoki server tomonidagi keshlash kabi tegishli keshlash strategiyalaridan foydalaning.</p>

<h3>Server Actions'ingizni Xavfsizlantiring</h3>

<p>Server Actions'ingizni ruxsatsiz kirish va o'zgartirishdan himoya qilish uchun xavfsizlik choralarini amalga oshiring. Faqat ruxsat berilgan foydalanuvchilar ma'lum amallarni bajarishi mumkinligini ta'minlash uchun autentifikatsiya va avtorizatsiyadan foydalaning. Saytlararo skripting (XSS) va SQL in'ektsiyasi kabi keng tarqalgan xavfsizlik zaifliklaridan himoyalaning. Foydalanuvchi kiritgan ma'lumotlarni ma'lumotlar bazasi so'rovlari yoki boshqa nozik operatsiyalarda ishlatishdan oldin har doim tozalang.</p>

<h2>React Server Actions uchun keng tarqalgan foydalanish holatlari</h2>

<p>Server Actions turli xil foydalanish holatlariga mos keladi, jumladan:</p>

<h3>Formalarni Yuborish</h3>

<p>Formalarni yuborishni boshqarish Server Actions uchun eng keng tarqalgan foydalanish holatlaridan biridir. Siz Server Actions'dan forma ma'lumotlarini qayta ishlash, kiritilgan ma'lumotlarni tekshirish va ma'lumotlarni ma'lumotlar bazasida saqlash uchun foydalanishingiz mumkin. Bu alohida API endpoint'lariga bo'lgan ehtiyojni yo'qotadi va dasturlash ish jarayonini soddalashtiradi. Masalan, foydalanuvchi ro'yxatdan o'tishi, aloqa formalari yoki mahsulot sharhlarini boshqarish.</p>

<h3>Ma'lumotlar Mutatsiyasi</h3>

<p>Server Actions ma'lumotlar bazasida ma'lumotlarni yaratish, yangilash yoki o'chirish kabi ma'lumotlar mutatsiyasini amalga oshirish uchun ishlatilishi mumkin. Bu sizga foydalanuvchi harakatlariga javoban ilovangiz ma'lumotlarini yangilash imkonini beradi. Misollar orasida foydalanuvchi profillarini yangilash, izohlar qo'shish yoki postlarni o'chirish mavjud.</p>

<h3>Autentifikatsiya va Avtorizatsiya</h3>

<p>Server Actions autentifikatsiya va avtorizatsiyani boshqarish uchun ishlatilishi mumkin. Siz Server Actions'dan foydalanuvchi ma'lumotlarini tekshirish, tokenlar chiqarish va nozik resurslarni himoya qilish uchun foydalanishingiz mumkin. Bu ilovangizning ma'lum qismlariga faqat ruxsat berilgan foydalanuvchilar kira olishini ta'minlaydi. Masalan, tizimga kirish/chiqish funksiyalarini amalga oshirish, foydalanuvchi rollarini boshqarish yoki ma'lum xususiyatlarga kirishni avtorizatsiya qilish.</p>

<h3>Haqiqiy Vaqtdagi Yangilanishlar</h3>

<p>Server Actions o'z-o'zidan real vaqtda ishlamasa-da, ularni WebSockets kabi boshqa texnologiyalar bilan birlashtirib, ilovangizga real vaqtda yangilanishlarni taqdim etish mumkin. Siz Server Actions'dan foydalanib, WebSockets orqali ulangan mijozlarga efirga uzatiladigan hodisalarni ishga tushirishingiz mumkin. Jonli chat ilovalari, hamkorlikda hujjat tahrirlash yoki real vaqt rejimida ishlaydigan boshqaruv panellarini o'ylang.</p>

<h2>Xalqarolashtirish (i18n) Bo'yicha Mulohazalar</h2>

<p>Global auditoriya uchun Server Actions bilan ilovalarni ishlab chiqishda xalqarolashtirish (i18n) juda muhim. Mana bir nechta asosiy mulohazalar:</p>

<h3>Xato Xabarlarini Mahalliylashtirish</h3>

<p>Server Actions tomonidan qaytarilgan xato xabarlari foydalanuvchining afzal ko'rgan tiliga mahalliylashtirilganligiga ishonch hosil qiling. Bu yaxshiroq foydalanuvchi tajribasini ta'minlaydi va foydalanuvchilarga har qanday muammolarni tushunish va hal qilishni osonlashtiradi. Tarjimalarni boshqarish va foydalanuvchi lokaliga asoslangan xabarlarni dinamik ravishda ko'rsatish uchun i18n kutubxonalaridan foydalaning.</p>

<h3>Sana va Raqam Formatlash</h3>

<p>Sana va raqamlarni foydalanuvchi lokaliga muvofiq formatlang. Turli lokallarda sanalar, raqamlar va valyutalarni ko'rsatish uchun turli xil qoidalar mavjud. Bu qiymatlarni foydalanuvchi lokaliga qarab to'g'ri formatlash uchun i18n kutubxonalaridan foydalaning.</p>

<h3>Vaqt Mintaqalarini Boshqarish</h3>

<p>Sana va vaqtlar bilan ishlashda vaqt mintaqalariga e'tibor bering. Sana va vaqtlarni UTC formatida saqlang va ularni ko'rsatishda foydalanuvchining mahalliy vaqt mintaqasiga o'tkazing. Bu foydalanuvchining joylashuvidan qat'i nazar, sana va vaqtlar to'g'ri ko'rsatilishini ta'minlaydi. Masalan, tadbirlarni rejalashtirish yoki vaqt belgilarini ko'rsatish.</p>

<h3>Valyuta Konvertatsiyasi</h3>

<p>Agar ilovangiz valyutalar bilan ishlasa, valyuta konvertatsiyasi funksiyasini taqdim eting. Foydalanuvchilarga narxlarni o'z mahalliy valyutasida ko'rish imkoniyatini bering. Ayirboshlash kurslari dolzarb bo'lishini ta'minlash uchun ishonchli valyuta konvertatsiyasi API'sidan foydalaning. Bu, ayniqsa, elektron tijorat ilovalari va moliyaviy xizmatlar uchun muhimdir.</p>

<h3>O'ngdan-Chapga (RTL) Yozuvni Qo'llab-quvvatlash</h3>

<p>Agar ilovangiz arab yoki ibroniy kabi o'ngdan chapga yoziladigan tillarni qo'llab-quvvatlasa, foydalanuvchi interfeysingiz bu tillar uchun to'g'ri aks ettirilganligiga ishonch hosil qiling. Bu maketni, matn yo'nalishini va piktogrammalarni aks ettirishni o'z ichiga oladi. Turli matn yo'nalishlariga moslashadigan maketlarni yaratish uchun CSS mantiqiy xususiyatlaridan foydalaning.</p>

<h2>Global Ilovalarda React Server Actions Misollari</h2>

<p>React Server Actions'ni global ilovalarda qanday ishlatish mumkinligiga oid bir nechta misollar:</p>

<h3>Elektron Tijorat Platformasi</h3>

<ul>
  <li><b>Mahsulotni savatga qo'shish:</b> Server Action mahsulotni foydalanuvchining xarid savatiga qo'shish uchun ishlatilishi mumkin. Amal mahsulot ID'sini tekshirishi, inventar darajasini tekshirishi va ma'lumotlar bazasidagi savatni yangilashi mumkin.</li>
  <li><b>Buyurtmani qayta ishlash:</b> Server Action buyurtmani qayta ishlash uchun ishlatilishi mumkin. Amal foydalanuvchining to'lov ma'lumotlarini tekshirishi, yetkazib berish xarajatlarini hisoblashi va ma'lumotlar bazasida buyurtma yaratishi mumkin.</li>
  <li><b>Axborot byulleteniga obuna bo'lish:</b> Server Action axborot byulleteniga obunalarni boshqarishi, elektron pochta manzillarini tekshirishi va ularni obunalar ro'yxatiga qo'shishi mumkin.</li>
</ul>

<h3>Ijtimoiy Media Platformasi</h3>

<ul>
  <li><b>Izoh qoldirish:</b> Server Action postga izoh qoldirish uchun ishlatilishi mumkin. Amal izoh matnini tekshirishi, uni post bilan bog'lashi va ma'lumotlar bazasida saqlashi mumkin.</li>
  <li><b>Postga layk bosish:</b> Server Action postga layk bosish uchun ishlatilishi mumkin. Amal post uchun layklar sonini yangilashi va laykni ma'lumotlar bazasida saqlashi mumkin.</li>
  <li><b>Foydalanuvchini kuzatish:</b> Server Actions kuzatuv so'rovlarini boshqarishi, foydalanuvchini bloklashni amalga oshirishi va kuzatuvchilar sonini yangilashi mumkin.</li>
</ul>

<h3>Sayohatni Bron Qilish Ilovasi</h3>

<ul>
  <li><b>Reyslarni qidirish:</b> Server Actions manzil va sanalarga asoslangan reyslar mavjudligini so'rash uchun ishlatilishi mumkin. Amal tashqi API'larni chaqirishi, natijalarni filtrlashi va foydalanuvchiga variantlarni taqdim etishi mumkin.</li>
  <li><b>Mehmonxona xonasini bron qilish:</b> Server Actions mehmonxona bronlarini boshqarishi, xona mavjudligini tasdiqlashi va to'lov tafsilotlarini qayta ishlashi mumkin.</li>
  <li><b>Sayohat manzillarini sharhlash:</b> Server action foydalanuvchi sharhlari va reytinglarini qo'shish va qayta ishlashni boshqarishi mumkin.</li>
</ul>

<h2>React Server Komponentlari va Server Actions</h2>

<p>React Server Komponentlari va Server Actions o'rtasidagi farqni tushunish muhim, chunki ular ko'pincha birgalikda ishlaydi, lekin turli maqsadlarga xizmat qiladi:</p>

<h3>React Server Komponentlari</h3>

<p>React Server Komponentlari serverda render qilinadigan komponentlardir. Ular sizga ma'lumotlarni olish, mantiqni bajarish va foydalanuvchi interfeysi elementlarini serverda render qilish imkonini beradi, bu esa unumdorlikni oshirishi va mijozga yuklanishi va bajarilishi kerak bo'lgan JavaScript miqdorini kamaytirishi mumkin. Server Komponentlari asosan foydalanuvchi interfeysini render qilish va dastlabki ma'lumotlarni olish uchun mo'ljallangan.</p>

<h3>Server Actions</h3>

<p>Server Actions — bu foydalanuvchi o'zaro ta'sirlariga javoban, masalan, forma yuborishlariga, serverda ishlaydigan asinxron funksiyalardir. Ular asosan ma'lumotlar mutatsiyasini boshqarish, server tomonidagi mantiqni bajarish va foydalanuvchiga fikr-mulohaza berish uchun mo'ljallangan. Server Actions mijoz komponentlaridan chaqiriladi, odatda forma yuborishlari yoki boshqa foydalanuvchi hodisalariga javoban.</p>

<p><b>Asosiy Farqlar:</b></p>

<ul>
  <li><b>Maqsad:</b> Server Komponentlari foydalanuvchi interfeysini render qilish uchun, Server Actions esa ma'lumotlar mutatsiyasini boshqarish uchun.</li>
  <li><b>Bajarilish:</b> Server Komponentlari sahifaning dastlabki yuklanishi paytida serverda render qilinadi, Server Actions esa foydalanuvchi o'zaro ta'sirlariga javoban mijoz komponentlaridan chaqiriladi.</li>
  <li><b>Ma'lumotlar Oqimi:</b> Server Komponentlari ma'lumotlarni to'g'ridan-to'g'ri serverdan olishi mumkin, Server Actions esa ma'lumotlarni mijozdan forma yuborishlari yoki boshqa foydalanuvchi hodisalari orqali oladi.</li>
</ul>

<p><b>Ular qanday birgalikda ishlaydi:</b></p>

<p>Server Komponentlari va Server Actions interaktiv veb-ilovalarni yaratish uchun birgalikda ishlatilishi mumkin. Server Komponentlari dastlabki foydalanuvchi interfeysini render qilishi va dastlabki ma'lumotlarni olishi mumkin, Server Actions esa ma'lumotlar mutatsiyasini boshqarishi va foydalanuvchiga fikr-mulohaza berishi mumkin. Masalan, Server Komponenti formani render qilishi mumkin, va Server Action forma yuborilishini boshqarishi va ma'lumotlar bazasidagi ma'lumotlarni yangilashi mumkin.</p>

<h2>Xulosa</h2>

<p>React Server Actions React ilovalaringizda formalarni qayta ishlash, ma'lumotlar mutatsiyasi va boshqa server tomonidagi operatsiyalarni boshqarishning kuchli va samarali usulini taklif etadi. Server Actions'dan foydalanib, siz dasturlash ish jarayonini soddalashtirishingiz, ilova unumdorligini oshirishingiz, xavfsizlikni kuchaytirishingiz va yaxshiroq foydalanuvchi tajribasini ta'minlashingiz mumkin. Siz tobora murakkabroq veb-ilovalarni yaratganingiz sari, React Server Actions'ni tushunish va ulardan foydalanish zamonaviy React dasturchilari uchun muhim mahoratga aylanadi.</p>

<p>Server Actions'dan samarali va xavfsiz foydalanayotganingizga ishonch hosil qilish uchun ushbu qo'llanmada keltirilgan eng yaxshi amaliyotlarga rioya qilishni unutmang. Server Actions'ni qabul qilish orqali siz React'ning to'liq salohiyatini ochishingiz va global auditoriya uchun yuqori unumdorlikka ega, foydalanuvchilar uchun qulay veb-ilovalarni yaratishingiz mumkin.</p>
</div><footer class="mt-12 pt-8 border-t border-gray-200"><h3 class="text-sm font-semibold text-gray-900 mb-3 dark:text-white/90">Tags:</h3><div class="flex flex-wrap gap-2"><span class="inline-block bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm hover:bg-gray-200 transition-colors dark:bg-neutral-800 dark:text-white dark:hover:bg-neutral-700">React Server Actions</span><span class="inline-block bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm hover:bg-gray-200 transition-colors dark:bg-neutral-800 dark:text-white dark:hover:bg-neutral-700">server komponentlari</span><span class="inline-block bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm hover:bg-gray-200 transition-colors dark:bg-neutral-800 dark:text-white dark:hover:bg-neutral-700">formalarni qayta ishlash</span><span class="inline-block bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm hover:bg-gray-200 transition-colors dark:bg-neutral-800 dark:text-white dark:hover:bg-neutral-700">server tomonida rendering</span><span class="inline-block bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm hover:bg-gray-200 transition-colors dark:bg-neutral-800 dark:text-white dark:hover:bg-neutral-700">ma'lumotlar mutatsiyasi</span><span class="inline-block bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm hover:bg-gray-200 transition-colors dark:bg-neutral-800 dark:text-white dark:hover:bg-neutral-700">React freymvorki</span><span class="inline-block bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm hover:bg-gray-200 transition-colors dark:bg-neutral-800 dark:text-white dark:hover:bg-neutral-700">veb-dasturlash</span><span class="inline-block bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm hover:bg-gray-200 transition-colors dark:bg-neutral-800 dark:text-white dark:hover:bg-neutral-700">ma'lumotlarni olish</span><span class="inline-block bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm hover:bg-gray-200 transition-colors dark:bg-neutral-800 dark:text-white dark:hover:bg-neutral-700">server integratsiyasi</span><span class="inline-block bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm hover:bg-gray-200 transition-colors dark:bg-neutral-800 dark:text-white dark:hover:bg-neutral-700">progressiv takomillashtirish</span></div></footer></article></div><script>$RS=function(a,b){a=document.getElementById(a);b=document.getElementById(b);for(a.parentNode.removeChild(a);a.firstChild;)b.parentNode.insertBefore(a.firstChild,b);b.parentNode.removeChild(b)};$RS("S:2","P:2")</script><script>$RB=[];$RV=function(b){$RT=performance.now();for(var a=0;a<b.length;a+=2){var c=b[a],e=b[a+1];null!==e.parentNode&&e.parentNode.removeChild(e);var f=c.parentNode;if(f){var g=c.previousSibling,h=0;do{if(c&&8===c.nodeType){var d=c.data;if("/$"===d||"/&"===d)if(0===h)break;else h--;else"$"!==d&&"$?"!==d&&"$~"!==d&&"$!"!==d&&"&"!==d||h++}d=c.nextSibling;f.removeChild(c);c=d}while(c);for(;e.firstChild;)f.insertBefore(e.firstChild,c);g.data="$";g._reactRetry&&g._reactRetry()}}b.length=0};
$RC=function(b,a){if(a=document.getElementById(a))(b=document.getElementById(b))?(b.previousSibling.data="$~",$RB.push(b,a),2===$RB.length&&(b="number"!==typeof $RT?0:$RT,a=performance.now(),setTimeout($RV.bind(null,$RB),2300>a&&2E3<a?2300-a:b+300-a))):a.parentNode.removeChild(a)};$RC("B:1","S:1")</script><div hidden id="S:3"></div><script>$RC("B:3","S:3")</script><div hidden id="S:0"><template id="P:4"></template><template id="P:5"></template><template id="P:6"></template><template id="P:7"></template><template id="P:8"></template><template id="P:9"></template><template id="P:a"></template><template id="P:b"></template><template id="P:c"></template><template id="P:d"></template><template id="P:e"></template><template id="P:f"></template><template id="P:10"></template><template id="P:11"></template><template id="P:12"></template><template id="P:13"></template><template id="P:14"></template><template id="P:15"></template><template id="P:16"></template><template id="P:17"></template><template id="P:18"></template><template id="P:19"></template><template id="P:1a"></template><template id="P:1b"></template><template id="P:1c"></template><template id="P:1d"></template><template id="P:1e"></template><template id="P:1f"></template><template id="P:20"></template><template id="P:21"></template><template id="P:22"></template><template id="P:23"></template><template id="P:24"></template><template id="P:25"></template><template id="P:26"></template><template id="P:27"></template><template id="P:28"></template><template id="P:29"></template><template id="P:2a"></template><template id="P:2b"></template><template id="P:2c"></template><template id="P:2d"></template><template id="P:2e"></template><template id="P:2f"></template><template id="P:30"></template><template id="P:31"></template><template id="P:32"></template><template id="P:33"></template><template id="P:34"></template><template id="P:35"></template><template id="P:36"></template><template id="P:37"></template><template id="P:38"></template><template id="P:39"></template><template id="P:3a"></template><template id="P:3b"></template><template id="P:3c"></template><template id="P:3d"></template><template id="P:3e"></template><template id="P:3f"></template><template id="P:40"></template><template id="P:41"></template><template id="P:42"></template><template id="P:43"></template><template id="P:44"></template><template id="P:45"></template><template id="P:46"></template><template id="P:47"></template><template id="P:48"></template><template id="P:49"></template></div><link rel="alternate" hrefLang="zh" href="https://mlog.uz/zh/blog/React%20Server%20Actions%3A%20A%20Comprehensive%20Guide%20to%20Form%20Processing%20and%20Server%20Integration"/><link rel="alternate" hrefLang="ja" href="https://mlog.uz/ja/blog/React%20Server%20Actions%3A%20A%20Comprehensive%20Guide%20to%20Form%20Processing%20and%20Server%20Integration"/><link rel="alternate" hrefLang="ko" href="https://mlog.uz/ko/blog/React%20Server%20Actions%3A%20A%20Comprehensive%20Guide%20to%20Form%20Processing%20and%20Server%20Integration"/><link rel="alternate" hrefLang="ar" href="https://mlog.uz/ar/blog/React%20Server%20Actions%3A%20A%20Comprehensive%20Guide%20to%20Form%20Processing%20and%20Server%20Integration"/><link rel="alternate" hrefLang="hi" href="https://mlog.uz/hi/blog/React%20Server%20Actions%3A%20A%20Comprehensive%20Guide%20to%20Form%20Processing%20and%20Server%20Integration"/><link rel="alternate" hrefLang="tr" href="https://mlog.uz/tr/blog/React%20Server%20Actions%3A%20A%20Comprehensive%20Guide%20to%20Form%20Processing%20and%20Server%20Integration"/><link rel="alternate" hrefLang="nl" href="https://mlog.uz/nl/blog/React%20Server%20Actions%3A%20A%20Comprehensive%20Guide%20to%20Form%20Processing%20and%20Server%20Integration"/><link rel="alternate" hrefLang="pl" href="https://mlog.uz/pl/blog/React%20Server%20Actions%3A%20A%20Comprehensive%20Guide%20to%20Form%20Processing%20and%20Server%20Integration"/><link rel="alternate" hrefLang="sv" href="https://mlog.uz/sv/blog/React%20Server%20Actions%3A%20A%20Comprehensive%20Guide%20to%20Form%20Processing%20and%20Server%20Integration"/><link rel="alternate" hrefLang="no" href="https://mlog.uz/no/blog/React%20Server%20Actions%3A%20A%20Comprehensive%20Guide%20to%20Form%20Processing%20and%20Server%20Integration"/><link rel="alternate" hrefLang="da" href="https://mlog.uz/da/blog/React%20Server%20Actions%3A%20A%20Comprehensive%20Guide%20to%20Form%20Processing%20and%20Server%20Integration"/><link rel="alternate" hrefLang="fi" href="https://mlog.uz/fi/blog/React%20Server%20Actions%3A%20A%20Comprehensive%20Guide%20to%20Form%20Processing%20and%20Server%20Integration"/><link rel="alternate" hrefLang="cs" href="https://mlog.uz/cs/blog/React%20Server%20Actions%3A%20A%20Comprehensive%20Guide%20to%20Form%20Processing%20and%20Server%20Integration"/><link rel="alternate" hrefLang="hu" href="https://mlog.uz/hu/blog/React%20Server%20Actions%3A%20A%20Comprehensive%20Guide%20to%20Form%20Processing%20and%20Server%20Integration"/><link rel="alternate" hrefLang="ro" href="https://mlog.uz/ro/blog/React%20Server%20Actions%3A%20A%20Comprehensive%20Guide%20to%20Form%20Processing%20and%20Server%20Integration"/><link rel="alternate" hrefLang="bg" href="https://mlog.uz/bg/blog/React%20Server%20Actions%3A%20A%20Comprehensive%20Guide%20to%20Form%20Processing%20and%20Server%20Integration"/><link rel="alternate" hrefLang="hr" href="https://mlog.uz/hr/blog/React%20Server%20Actions%3A%20A%20Comprehensive%20Guide%20to%20Form%20Processing%20and%20Server%20Integration"/><link rel="alternate" hrefLang="sk" href="https://mlog.uz/sk/blog/React%20Server%20Actions%3A%20A%20Comprehensive%20Guide%20to%20Form%20Processing%20and%20Server%20Integration"/><link rel="alternate" hrefLang="sl" href="https://mlog.uz/sl/blog/React%20Server%20Actions%3A%20A%20Comprehensive%20Guide%20to%20Form%20Processing%20and%20Server%20Integration"/><link rel="alternate" hrefLang="et" href="https://mlog.uz/et/blog/React%20Server%20Actions%3A%20A%20Comprehensive%20Guide%20to%20Form%20Processing%20and%20Server%20Integration"/><link rel="alternate" hrefLang="lv" href="https://mlog.uz/lv/blog/React%20Server%20Actions%3A%20A%20Comprehensive%20Guide%20to%20Form%20Processing%20and%20Server%20Integration"/><link rel="alternate" hrefLang="lt" href="https://mlog.uz/lt/blog/React%20Server%20Actions%3A%20A%20Comprehensive%20Guide%20to%20Form%20Processing%20and%20Server%20Integration"/><link rel="alternate" hrefLang="el" href="https://mlog.uz/el/blog/React%20Server%20Actions%3A%20A%20Comprehensive%20Guide%20to%20Form%20Processing%20and%20Server%20Integration"/><link rel="alternate" hrefLang="he" href="https://mlog.uz/he/blog/React%20Server%20Actions%3A%20A%20Comprehensive%20Guide%20to%20Form%20Processing%20and%20Server%20Integration"/><link rel="alternate" hrefLang="th" href="https://mlog.uz/th/blog/React%20Server%20Actions%3A%20A%20Comprehensive%20Guide%20to%20Form%20Processing%20and%20Server%20Integration"/><link rel="alternate" hrefLang="vi" href="https://mlog.uz/vi/blog/React%20Server%20Actions%3A%20A%20Comprehensive%20Guide%20to%20Form%20Processing%20and%20Server%20Integration"/><link rel="alternate" hrefLang="id" href="https://mlog.uz/id/blog/React%20Server%20Actions%3A%20A%20Comprehensive%20Guide%20to%20Form%20Processing%20and%20Server%20Integration"/><link rel="alternate" hrefLang="bn" href="https://mlog.uz/bn/blog/React%20Server%20Actions%3A%20A%20Comprehensive%20Guide%20to%20Form%20Processing%20and%20Server%20Integration"/><link rel="alternate" hrefLang="uk" href="https://mlog.uz/uk/blog/React%20Server%20Actions%3A%20A%20Comprehensive%20Guide%20to%20Form%20Processing%20and%20Server%20Integration"/><link rel="alternate" hrefLang="uz" href="https://mlog.uz/uz/blog/React%20Server%20Actions%3A%20A%20Comprehensive%20Guide%20to%20Form%20Processing%20and%20Server%20Integration"/><link rel="alternate" hrefLang="fa" href="https://mlog.uz/fa/blog/React%20Server%20Actions%3A%20A%20Comprehensive%20Guide%20to%20Form%20Processing%20and%20Server%20Integration"/><link rel="alternate" hrefLang="gu" href="https://mlog.uz/gu/blog/React%20Server%20Actions%3A%20A%20Comprehensive%20Guide%20to%20Form%20Processing%20and%20Server%20Integration"/><link rel="alternate" hrefLang="kn" href="https://mlog.uz/kn/blog/React%20Server%20Actions%3A%20A%20Comprehensive%20Guide%20to%20Form%20Processing%20and%20Server%20Integration"/><link rel="alternate" hrefLang="ml" href="https://mlog.uz/ml/blog/React%20Server%20Actions%3A%20A%20Comprehensive%20Guide%20to%20Form%20Processing%20and%20Server%20Integration"/><link rel="alternate" hrefLang="mr" href="https://mlog.uz/mr/blog/React%20Server%20Actions%3A%20A%20Comprehensive%20Guide%20to%20Form%20Processing%20and%20Server%20Integration"/><link rel="alternate" hrefLang="ta" href="https://mlog.uz/ta/blog/React%20Server%20Actions%3A%20A%20Comprehensive%20Guide%20to%20Form%20Processing%20and%20Server%20Integration"/><link rel="alternate" hrefLang="te" href="https://mlog.uz/te/blog/React%20Server%20Actions%3A%20A%20Comprehensive%20Guide%20to%20Form%20Processing%20and%20Server%20Integration"/><link rel="alternate" hrefLang="x-default" href="https://mlog.uz/en/blog/React%20Server%20Actions%3A%20A%20Comprehensive%20Guide%20to%20Form%20Processing%20and%20Server%20Integration"/><meta name="format-detection" content="telephone=no, address=no, email=no"/><meta name="google-site-verification" content="your-google-verification-code"/><meta name="yandex-verification" content="your-yandex-verification-code"/><meta property="og:title" content="React Server Actions: Formalarni Qayta Ishlash va Server Integratsiyasi Bo'yicha To'liq Qo'llanma"/><meta property="og:description" content="React Server Actions yordamida formalarni muammosiz qayta ishlash va server tomonidagi ma'lumotlar mutatsiyasini amalga oshiring. Samarali, xavfsiz va qulay veb-ilovalarni yaratishni o'rganing."/><meta property="og:url" content="https://mlog.uz/uz/blog/React%20Server%20Actions%3A%20A%20Comprehensive%20Guide%20to%20Form%20Processing%20and%20Server%20Integration"/><meta property="og:site_name" content="MLOG - Blog Platform"/><meta property="og:locale" content="uz"/><meta property="og:type" content="article"/><meta property="article:published_time" content="2025-08-30T07:51:25.860Z"/><meta property="article:modified_time" content="2025-08-30T07:51:25.860Z"/><meta property="article:author" content="MEZES"/><meta property="article:tag" content="React Server Actions"/><meta property="article:tag" content="server komponentlari"/><meta property="article:tag" content="formalarni qayta ishlash"/><meta property="article:tag" content="server tomonida rendering"/><meta property="article:tag" content="ma'lumotlar mutatsiyasi"/><meta property="article:tag" content="React freymvorki"/><meta property="article:tag" content="veb-dasturlash"/><meta property="article:tag" content="ma'lumotlarni olish"/><meta property="article:tag" content="server integratsiyasi"/><meta property="article:tag" content="progressiv takomillashtirish"/><meta name="twitter:card" content="summary_large_image"/><meta name="twitter:site" content="mlog.uz"/><meta name="twitter:creator" content="MEZES"/><meta name="twitter:title" content="React Server Actions: Formalarni Qayta Ishlash va Server Integratsiyasi Bo'yicha To'liq Qo'llanma"/><meta name="twitter:description" content="React Server Actions yordamida formalarni muammosiz qayta ishlash va server tomonidagi ma'lumotlar mutatsiyasini amalga oshiring. Samarali, xavfsiz va qulay veb-ilovalarni yaratishni o'rganing."/><meta name="twitter:image" content="https://mlog.uz/images/mlog.jpg"/><link rel="icon" href="/favicon.ico" type="image/x-icon" sizes="32x32"/><link rel="icon" href="/images/mlog-192.png"/><link rel="apple-touch-icon" href="/images/mlog-192.png"/><script >document.querySelectorAll('body link[rel="icon"], body link[rel="apple-touch-icon"]').forEach(el => document.head.appendChild(el))</script><div hidden id="S:4"></div><script>$RS("S:4","P:4")</script><div hidden id="S:5"></div><script>$RS("S:5","P:5")</script><div hidden id="S:6"></div><script>$RS("S:6","P:6")</script><div hidden id="S:7"></div><script>$RS("S:7","P:7")</script><div hidden id="S:8"></div><script>$RS("S:8","P:8")</script><div hidden id="S:9"></div><script>$RS("S:9","P:9")</script><div hidden id="S:a"></div><script>$RS("S:a","P:a")</script><div hidden id="S:b"></div><script>$RS("S:b","P:b")</script><div hidden id="S:c"></div><script>$RS("S:c","P:c")</script><div hidden id="S:d"></div><script>$RS("S:d","P:d")</script><div hidden id="S:e"></div><script>$RS("S:e","P:e")</script><div hidden id="S:f"></div><script>$RS("S:f","P:f")</script><div hidden id="S:10"></div><script>$RS("S:10","P:10")</script><div hidden id="S:11"></div><script>$RS("S:11","P:11")</script><div hidden id="S:12"></div><script>$RS("S:12","P:12")</script><div hidden id="S:13"></div><script>$RS("S:13","P:13")</script><div hidden id="S:14"></div><script>$RS("S:14","P:14")</script><div hidden id="S:15"></div><script>$RS("S:15","P:15")</script><div hidden id="S:16"></div><script>$RS("S:16","P:16")</script><div hidden id="S:17"></div><script>$RS("S:17","P:17")</script><div hidden id="S:18"></div><script>$RS("S:18","P:18")</script><div hidden id="S:19"></div><script>$RS("S:19","P:19")</script><div hidden id="S:1a"></div><script>$RS("S:1a","P:1a")</script><div hidden id="S:1b"></div><script>$RS("S:1b","P:1b")</script><div hidden id="S:1c"></div><script>$RS("S:1c","P:1c")</script><div hidden id="S:1d"></div><script>$RS("S:1d","P:1d")</script><div hidden id="S:1e"></div><script>$RS("S:1e","P:1e")</script><div hidden id="S:1f"></div><script>$RS("S:1f","P:1f")</script><div hidden id="S:20"></div><script>$RS("S:20","P:20")</script><div hidden id="S:21"></div><script>$RS("S:21","P:21")</script><div hidden id="S:22"></div><script>$RS("S:22","P:22")</script><div hidden id="S:23"></div><script>$RS("S:23","P:23")</script><div hidden id="S:24"></div><script>$RS("S:24","P:24")</script><div hidden id="S:25"></div><script>$RS("S:25","P:25")</script><div hidden id="S:26"></div><script>$RS("S:26","P:26")</script><div hidden id="S:27"></div><script>$RS("S:27","P:27")</script><div hidden id="S:28"></div><script>$RS("S:28","P:28")</script><div hidden id="S:29"></div><script>$RS("S:29","P:29")</script><div hidden id="S:2a"></div><script>$RS("S:2a","P:2a")</script><div hidden id="S:2b"></div><script>$RS("S:2b","P:2b")</script><div hidden id="S:2c"></div><script>$RS("S:2c","P:2c")</script><div hidden id="S:2d"></div><script>$RS("S:2d","P:2d")</script><div hidden id="S:2e"></div><script>$RS("S:2e","P:2e")</script><div hidden id="S:2f"></div><script>$RS("S:2f","P:2f")</script><div hidden id="S:30"></div><script>$RS("S:30","P:30")</script><div hidden id="S:31"></div><script>$RS("S:31","P:31")</script><div hidden id="S:32"></div><script>$RS("S:32","P:32")</script><div hidden id="S:33"></div><script>$RS("S:33","P:33")</script><div hidden id="S:34"></div><script>$RS("S:34","P:34")</script><div hidden id="S:35"></div><script>$RS("S:35","P:35")</script><div hidden id="S:36"></div><script>$RS("S:36","P:36")</script><div hidden id="S:37"></div><script>$RS("S:37","P:37")</script><div hidden id="S:38"></div><script>$RS("S:38","P:38")</script><div hidden id="S:39"></div><script>$RS("S:39","P:39")</script><div hidden id="S:3a"></div><script>$RS("S:3a","P:3a")</script><div hidden id="S:3b"></div><script>$RS("S:3b","P:3b")</script><div hidden id="S:3c"></div><script>$RS("S:3c","P:3c")</script><div hidden id="S:3d"></div><script>$RS("S:3d","P:3d")</script><div hidden id="S:3e"></div><script>$RS("S:3e","P:3e")</script><div hidden id="S:3f"></div><script>$RS("S:3f","P:3f")</script><div hidden id="S:40"></div><script>$RS("S:40","P:40")</script><div hidden id="S:41"></div><script>$RS("S:41","P:41")</script><div hidden id="S:42"></div><script>$RS("S:42","P:42")</script><div hidden id="S:43"></div><script>$RS("S:43","P:43")</script><div hidden id="S:44"></div><script>$RS("S:44","P:44")</script><div hidden id="S:45"></div><script>$RS("S:45","P:45")</script><div hidden id="S:46"></div><script>$RS("S:46","P:46")</script><div hidden id="S:47"></div><script>$RS("S:47","P:47")</script><div hidden id="S:48"></div><script>$RS("S:48","P:48")</script><div hidden id="S:49"></div><script>$RS("S:49","P:49")</script><script>$RC("B:0","S:0")</script></body></html>